<template>
    <div class="pay-order">
        <ul class="pay-order-top">
            <li>
                <span>参加活动</span>
                <span>(省 80 元)</span>
                <span>红包车红包</span>
            </li>
            <li>
                <span>优惠券</span>
                <span class="fr">暂无可用优惠券</span>
            </li>
        </ul>
        <div class="pay-order-mid"></div>
        <div class="pay-order-bot">
            <div>
                <p>余额支付&nbsp;<span>16.14</span>&nbsp;元</p>
                <p>剩余应付&nbsp;<span>0</span>&nbsp;元</p>
            </div>
            <button type="button">结算并锁车</button>
        </div>
    </div>
</template>

<script>
 export default {
    data () {
        return {

        }
    }
 }
</script>

<style scoped>
    .pay-order {
        height: 100%;
        padding: 20px;
        background-color: #f5f5f5;
        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #aaa;
        letter-spacing: 0;
    }
    .pay-order-top {
        background: #fff;
        box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);
        border-radius: 10px;
    }
    .pay-order-top li {
        height: 88px;
        line-height: 88px;
        padding: 0 64px 0 30px;

        position: relative;
    }
    .pay-order-top li span {
        line-height: 1;
        margin-top: 30px;
    }
    .pay-order-top li span:nth-of-type(1) {
        float: left;
        color: #333;
        line-height: 1;
    }
    .pay-order-top li:first-of-type span:nth-of-type(3) {
        float: right;
        color: #333;
        line-height: 1;
    }
    .pay-order-top li:first-of-type span:nth-of-type(2) {
        float: right;
        margin-left: 20px;
        color: #f26050;
    }
    .pay-order-top li:last-of-type {
        border: 2px solid #f5f5f5;
    }
    .pay-order-top li:after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;

        position: absolute;
        top: 30px;
        right: 30px;
        border-width: 1px;
        border-style: solid;
        border-color: transparent #e6e6e6 #e6e6e6 transparent;
        transform: rotate(-45deg);
    }
    .pay-order-bot {
        width: 100%;
        height: 160px;
        padding: 30px;
        position: absolute;
        right: 0;
        bottom: 0;

        background: #fff;
        box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);

        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #aaa;
        letter-spacing: 0;
    }
    .pay-order-bot p {
        /*margin-bottom: 23px;*/
    }
    button {
        width: 320px;
        height: 100px;
        padding-right: 20px;

        color: #fff;

        position: absolute;
        top: 30px;
        right: 30px;

        background: #0db95f;
        background: #0db95f url() 250px 38px no-repeat;
        background-size: 15px 24px;
        border-radius: 50px;
    }
    .pay-order-bot p:first-of-type span {
        color: #7ed9aa;
    }
    .pay-order-bot p:last-of-type span {
        font-family: PingFangSC-Semibold;
        font-size: 48px;
        color: #696969;
        letter-spacing: 0;
    }
</style>
